<template>
  <div>
    <div class="p-2 mb-2">
      <i class="fa fa-bell-o fa-fw text-danger"></i>
      我的提醒
    </div>
    <div class="p-2 card">
      <div class="menu-item bg-light p-2 d-flex justify-content-between" @click="showLoanData">
        <div>
          <i class="fa fa-file-text-o fa-fw text-primary"></i>
          即将到期
        </div>
        <div class="text-danger mr-4 font-weight-bold">{{ willCount }}</div>
      </div>

      <div class="menu-item bg-light p-2 mt-2 d-flex justify-content-between" @click="showUnLoan">
        <div>
          <i class="fa fa-file-text-o fa-fw text-primary"></i>
          到期未解保
        </div>
        <div class="text-danger mr-4 font-weight-bold">{{ totalCount }}</div>
      </div>
    </div>

    <loan-project :visible.sync="loanVisible"></loan-project>
    <unloan-project :visible.sync="unVisible"></unloan-project>
  </div>
</template>

<script>
import LoanProject from '@/bank/views/business/index/warning/LoanProject'
import UnloanProject from '@/bank/views/business/index/warning/unLoan/UnloanProject'
import { mapGetters } from 'vuex'
import { add, addressCut } from '@vimi/utils-tool'
export default {
  components: {
    LoanProject,
    UnloanProject,
  },
  data() {
    return {
      loanVisible: false,
      unVisible: false,
      loading: false,
      totalCount: 0,
      willCount: 0,
    }
  },
  computed: {
    ...mapGetters(['user', 'clientId']),
    bankType() {
      return this.user.clientOrgClassType
    },
    address() {
      return this.user.queryAddressCode
    },
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData(this.$serviceName, 'datum_customer_attachment/statistics/', {
          'apiKey.kv': 'bank-index-total',
          'bankType.kv': this.bankType,
          'addressCode.kv': addressCut(this.address),
          'bankId.kv': this.clientId,
        })
        .then(res => {
          const data = res.data ?? {}
          this.totalCount = add(data.expire_28 || 0, data.expire_xl || 0)
          this.willCount = add(data.will_expire_28 || 0, data.will_expire_xl || 0)
        })
        .finally(() => {
          this.loading = false
        })
    },
    showLoanData() {
      this.loanVisible = true
    },
    showUnLoan() {
      this.unVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.menu-item {
  &:hover {
    cursor: pointer;
    color: $primary;
  }
}
</style>
